<template>
	<view id="app">
		<view class="pinglun-box">
			<view class="pinglun-top">
				<!-- <view class="pinglun" @click="onNavigationBarButtonTap">
					评论
				</view> 

				<view class="star">
					<uniRate :value="0" :size="15" activeColor="#e2c48a" @change="onChange"></uniRate>
				</view>-->
			</view>
			<textarea class="textare" value="" placeholder="来评价吧" v-model="pinglun" />
			<!-- <addImage @click="showImg"></addImage> -->
			<view class="contentMid">
				<!-- <view class="videoDetail uni-font17">
					<view class="">
						产品印象
					</view>
				</view> -->
				<view class="label">
					<view class="label-item" :class="{'selected':item.isSelect}" v-for="(item,index) in productTagList" :key="index" v-bind:value="item.tagId" @click="toSelectTag(item)">{{item.tagName}}</view>
					<!-- <view class="label-item">国企大机构背景</view>
					<view class="label-item">股力雄厚</view>
					<view class="label-item">历史对付100%</view>
					<view class="label-item">股东实力雄厚</view> -->
				</view>
			</view>
			<view class="uni-switch-box">
				<view class="uni-list">
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">匿名</view>
						<switch style="zoom: .8;" color="rgba(196, 156, 90, 1)"  @change="getSwitchValue" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import global_ from '../../../../components/tool/homePageQuery';
	import addImage from '../../../API/image/image.vue';
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	
	export default {
		components:{
			addImage,
			uniRate
		},
		data() {
			return {
				bL_ID:"",
				starNum:0 ,//产品评分值（星颗数），
				pinglun:'',
				token:uni.getStorageSync('token_key'),
				proj_id:'',
				ayms_flg:'N',//是否匿名
				// tempFileList:[],//图片file
				imageList:[],//图片路径
				productTagList:[],//标签
				selectedTags:[]//选择的标签
			};
		},
		methods:{
			showImg(e){
				console.info("所选择的图片：》》》》》》》"+e.imageList);
				this.imageList = e.imageList;
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e));
				this.starNum=e.value;
				console.log(this.starNum)
				console.log(this.pinglun)
			},getSwitchValue(e) {
				var flag = e.detail.value;
				if(flag==true){
					this.ayms_flg  = 'Y';
				}else{
					this.ayms_flg = 'N';
				}
				console.info("是否匿名"+flag);
				// app.$refs.app.Teaching();
			},
			toSelectTag(e){
				e.isSelect=!e.isSelect;
			}
			
		},
		onLoad(option) {
			this.proj_id = option.proj_id;
			this.bL_ID = option.bL_ID;
			//console.info("this.proj_id"+this.proj_id)
			console.info("接收财经快报评论id---"+this.bL_ID)
			//初始化标签
			uni.request({
				url: global_.api.showProdTags,
				method: 'POST',
				data: {
					// proj_id:this.proj_id
					proj_id:this.proj_id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					var tagsArrTemp = new Array();
					tagsArrTemp = res.data.data;
					for(var i = 0;i<tagsArrTemp.length;i++){
						var tag_id1 = tagsArrTemp[i].tag_id.toString();
						var tag_nm1 = tagsArrTemp[i].tag_nm.toString();
						var obj = new Object();
						obj.tagId = tag_id1;
						obj.tagName = tag_nm1;
						obj.isSelect = false;
						this.productTagList.push(obj);
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},	
		//点击评论按钮
		onNavigationBarButtonTap(e){
			var tags = this.productTagList;//所有标签
			this.selectedTags=[];
			for(var i=0;i<tags.length;i++){
				if(tags[i].isSelect==true){
					var temp = JSON.stringify(tags[i]);
					this.selectedTags.push(temp);//通过json字符串转化为json对象
				}
			}
			if(this.pinglun ==''){
				uni.showToast({
					title: '请输入评论内容',
					icon: 'none',
					duration:2000,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				return;
			}
			var that=this
			console.log("财经评论是否匿名------"+that.ayms_flg)
			uni.request({
				url:global_.api.caijingkbComment,
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					//selectedTags:that.selectedTags,
					// answid:'',
					// userid:1,
					bl_Id:that.bL_ID,//财经快报ID
					ayms_Flg:that.ayms_flg,//是否匿名标识
					//prod_score:that.starNum,
					answ_Dtl:that.pinglun,//回复内容
					// file:that.tempFileList,
					token:that.token
				},
				dataType: 'json',
				success: res => {
					//console.info("评论成功，没有插入图片")
					this.answid = res.data.data;
					/* var imageList = that.imageList;
					console.info(imageList.length) */
					// var jsonFile = JSON.stringify(that.tempFileList);
					var uploadStatus = true;
					if(uploadStatus){
						uni.showToast({
							title: '评论成功',
							icon: 'success',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						function sleep2(ms) {
							return new Promise(function(resolve, reject) {
								setTimeout(resolve, ms)
							})
						}
						sleep2(900).then(() => {
							uni.navigateTo({
									url: '/pages/index/zaobao/zaobao?newsid='+this.bL_ID,
									success: res => {},
									fail: () => {},
									complete: () => {}
							});
						})
						
					}
					/* uni.navigateBack({
						
					}); */
				},
				fail: (err) => {
					console.info("评论失败")
					console.log(err)
				},
				complete: () => {}
			});
		}
	}
</script>

<style>
	page{
		background: rgb(255,255,255);
	}
	.pinglun-box{
		padding: 0 30upx;
	}
	.pinglun-top{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 90upx;
	}
	.star{
		
		margin-left: 22upx;
	}

	.textare{
		width: 630upx;
		padding: 30upx;
		height: 180upx;
		border:1px solid rgba(238,238,238,1);
		border-radius:5px;
		font-size: 14px;
	}
	.contentMid {

		padding: 0 0 30upx 0;

	}
	.videoDetail {
		border-left: 4px solid rgba(203, 147, 89, 1);
		padding-left: 17upx;
		margin: 31upx 0 27upx 0;

	}
	.uni-font17 {
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			font-size: 17px;
	
		}
	.label {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	
	.label .label-item {
		height: 60upx;
		background: rgba(245, 245, 245, 1);
		border-radius: 15px;
		line-height: 60upx;
		padding: 0 32upx;
		margin:0 10upx 10upx 0;
		font-size: 12px;
	}	
	 .label-item.selected {
		height: 60upx;
		background: rgba(230,176,93, 1);
		border-radius: 15px;
		line-height: 60upx;
		padding: 0 32upx;
		margin:0 10upx 10upx 0;
		font-size: 12px;
	}	
	.uni-switch-box{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		
	}
	
</style>
